<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//div1时间的星期判断
			function A_timeweek(a) {
				switch(a) {
					case 0:
						return "星期日";
					case 1:
						return "星期一";
					case 2:
						return "星期二";
					case 3:
						return "星期三";
					case 4:
						return "星期四";
					case 5:
						return "星期五";
					case 6:
						return "星期六";
				}
			}
			//div1时间显示
			function A_time() {
				var time = new Date();
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				var day = time.getDate();
				var week = A_timeweek(time.getDay());
				var hour = time.getHours();
				var minute = time.getMinutes();
				var second = time.getSeconds();
				var noon = time.getHours() > 0 ? "pm" : "am";
				if(month < 10) {
					month = "0" + time.getMonth();
				}
				if(day < 10) {
					day = "0" + time.getDate();
				}
				if(hour < 10) {
					hour = "0" + time.getHours();
				}
				if(minute < 10) {
					minute = "0" + time.getMinutes();
				}
				if(second < 10) {
					second = "0" + time.getSeconds();
				}
				var nowtime = (year + "年" + month + "月" + day + "日" + "&nbsp" + week + "&nbsp" + hour + ":" + minute + ":" + second + noon);
				document.getElementById("div1").innerHTML = nowtime
			}
			setInterval("A_time()", 0);
			//
			var time = new Date();
			var year = time.getFullYear();
			var month = time.getMonth() + 1;
			var day = time.getDate();
			//当前月的天数
			function A_monthday() {
				if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
					return 31;
				} else if(month == 4 || month == 6 || month == 9 || month == 11) {
					return 30;
				} else if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
					return 29;
				} else {
					return 28;
				}
			}
			//当前月的td数以及换行判断
			function A_tablenum() {
				var B_tablenum = "";
				for(var e = 1; e <= A_monthday(); e++) {
					if((e + A_week()) % 7 == 1) {
						B_tablenum += "</tr>"
					}
					if(year == time.getFullYear() && month == (time.getMonth() + 1) && day == e) {
						if(e < 10) {
							B_tablenum += "<td style='color: blue;'>" + "0" + e + "</td>"
						} else {
							B_tablenum += "<td style='color: blue;'>" + e + "</td>"
						}
					} else if(e < 10) {
						B_tablenum += "<td>" + "0" + e + "</td>"
					} else {
						B_tablenum += "<td>" + e + "</td>"
					}
				}
				return B_tablenum;
			}
			//本月1号星期几：（总年天+总月天+1号）%7
			function A_week() {
				var sumday = 0;
				for(var b = 1900; b < year; b++) {
					if(b % 4 == 0 && b % 100 != 0 || b % 400 == 0) {
						sumday += 366;
					} else {
						sumday += 365;
					}
				}
				for(var c = 1; c < month; c++) {
					if(c == 1 || c == 3 || c == 5 || c == 7 || c == 8 || c == 10 || c == 12) {
						sumday += 31;
					} else if(c == 4 || c == 6 || c == 9 || c == 11) {
						sumday += 30;
					} else if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
						sumday += 29;
					} else {
						sumday += 28;
					}
				}
				sumday += 1;
				return sumday % 7;
			}
			//上个月在表格中显示的td数
			function A_lastmonth() {
				var lastmonth = month - 1
				var lastmonthday = 0;
				if(lastmonth == 1 || lastmonth == 3 || lastmonth == 5 || lastmonth == 7 || lastmonth == 8 || lastmonth == 10 || lastmonth == 12) {
					lastmonthday = 31;
				} else if(lastmonth == 4 || lastmonth == 6 || lastmonth == 9 || lastmonth == 11) {
					lastmonthday = 30;
				} else if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
					lastmonthday = 29;
				} else {
					lastmonthday = 28;
				}
				var B_lastmonth = "";
				for(var d = 1; d <= A_week(); d++) {
					if(lastmonth == 12) {
						year--;
						B_lastmonth += "<td style='color: darkgray;'>" + (31 - A_week() + d) + "</td>"
					} else {
						B_lastmonth += "<td style='color: darkgray;'>" + (lastmonthday - A_week() + d) + "</td>"
					}
				}
				return B_lastmonth;
			}
			//下个月在表格中显示的td数
			function A_nextmonth() {
				var B_nextmonth = ""
				var g = 7 - (A_week() + A_monthday()) % 7
				for(var f = 0; f < g; f++) {
					if((f + A_week() + A_monthday()) % 7 == 0) {
						B_nextmonth += "<tr>"
					}
					B_nextmonth += "<td  style='color: darkgray;'>" + "0" + (f + 1) + "</td>"
				}
				return B_nextmonth;
			}
			//将日历以字符串连接的形式显示在表格中
			function A_div2() {
				var str = "<table cellspacing='0px'>"
				str += "<tr><td colspan=7;>" + year + "年" + month + "月" + "</tr></td>"
				str += "<tr>" + "<td>" + "日" + "</td>" + "<td>" + "一" + "</td>" + "<td>" + "二" + "</td>" + "<td>" + "三" + "</td>" + "<td>" + "四" + "</td>" + "<td>" + "五" + "</td>" + "<td>" + "六" + "</td></tr>"
				str += A_lastmonth();
                str += A_tablenum();
				str += A_nextmonth();
				str += "</table>"
				document.getElementById("div2").innerHTML = str
			}
			//键盘函数，左右年，上下月，event是事件名，a是参数，a.keyCode是键盘ASCII码值
			function A_jianpan(e) {
				switch(e.keyCode) {
					case 37: //左
						year--;
						A_div2();
						break;
					case 38: //上
						if(month == 1) {
							year--;
							month = 12;
						} else {
							month--;
						}
						A_div2();
						break;
					case 39: //右
						year++;
						A_div2();
						break;
					case 40: //下
						if(month == 12) {
							year++;
							month = 1;
						} else {
							month++;
						}
						A_div2();
						break;
				}
			}
		</script>
		<style>
			#div1 {
				background: gray;
				color: white;
				font-family: "微软雅黑";
				width: 300px;
				line-height: 30px;
				text-align: center;
				text-align: center;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				position: absolute;
				left: 550px;
				top: 100px;
				z-index: 1;
			}
			
			#div2 {
				/*border: 1px solid white;*/
				background-color: white;
				position: absolute;
				left: 550px;
				top: 130px;
				z-index: 1;
			}
			
			#div3 {
				float: left;
				position: relative;
				z-index: 0;
			}
			
			#bigdiv {
				width: 600px;
			}
			
			#tu1 {
				height: 550px;
			}
			
			#tu2 {
				width: 60px;
				position: absolute;
				left: 550px;
				top: 37px;
			}
			
			td {
				text-align: center;
				border: 1px solid gray;
				color: darkgrayblack;
				font-family: "微软雅黑";
			}
			
			table {
				border: 1px solid gray;
				width: 300px;
			}
		</style>
	</head>

	<body onload="A_div2()" onkeydown="A_jianpan(event)">
		<div id="bigdiv">
			<div id="div1">

			</div>
			<div id="div2">

			</div>
			<div id="div3">
				<img id="tu1" src="img/5039fd4c7e5ac.jpg" />
				<img id="tu2" src="img/201510131756576138.gif" />
			</div>
		</div>

	</body>

</html>